const Header = (props) => {
    return <header>
        <nav>
            <ul>
                {
                    props.nav.map((item, index) => {
                        return <li onClick={()=>props.switchActive(index)} style={props.active === index ? { background: 'red', color: 'white' } : {}} key={index}>{item}</li>
                    })
                }
            </ul>
        </nav>
    </header>
}
Header.defaultProps = {
    nav: [],
    active: 0,
    switchActive(index){
        console.log(index)
    }
}
export default Header

